<template>
  <div style="padding: 20px;">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span> 书籍列表</span>
      </div>
      <el-button type="primary" @click="addRow">新增</el-button>
      <el-table
          size="mini"
          :data="tableData"
          style="width: 100%">
        <el-table-column prop="publisher" label="出版社"></el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="translator" label="翻译"></el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span style="color: blue" @click="modifyRow(scope.row)">修改</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!--新增修改组件-->
    <row-edit v-if="handleRow.show" :handleData="handleRow" @success="rowEditSuccess" @close="handleRow.show = false"></row-edit>
  </div>
</template>

<script>
  import { ApiBookList } from '@/api/index'
  export default {
    name: "index",
    components: {
      rowEdit: ()=> import('./rowEdit')
    },
    data () {
      return {
        tableData: [],
        handleRow: {
          row: {}, // 要操作的哪一行数据
          type: 1, // 1:新增，2修改
          show: false
        }
      }
    },
    created() {
      this.getLists()
    },
    methods: {
      // 获取列表
      getLists() {
        let vm = this
        ApiBookList().then((res) => {
          console.log('书籍list', res.data.lists)
          vm.tableData = res.data.lists
        })
      },
      // 新增
      addRow () {
        console.log('点击新增按钮')
        this.handleRow.show = true
        this.handleRow.row = {}
        this.handleRow.type = 1
      },
      // 点击修改
      modifyRow(row) {
        console.log(row, '待修改的数据')
        this.handleRow.show = true
        this.handleRow.row = row
        this.handleRow.type = 2
      },
      // 新增和修改成功
      rowEditSuccess() {
        // 新增或者修改成功后获取一下列表，把弹窗关闭
        this.getLists()
        this.handleRow.show = false
      }
    }
  }
</script>

<style scoped>

</style>
